<template>
  <view>
    <t-enhanced-table ref="tableRef" row-key="menuId" :columns="columns" :data="data" table-layout="auto"
      :tree="treeConfig" :treeExpandAndFoldIcon="treeExpandIcon">
      <!-- 菜单名称列（树形列） -->
      <template #menuName="{ row }">
        <t-space>
          <span>{{ row.menuName }}</span>
        </t-space>
      </template>

      <!-- 图标 -->
      <template #icon="{ row }">
        <div>
          <t-icon :name="row.icon" />
        </div>
      </template>

      <!-- 状态列 -->
      <template #status="{ row }">
        <div>
          <t-tag :theme="row.status == 0 ? 'primary' : 'danger'" variant="light">
            {{ row.status == 0 ? '正常' : '停用' }}
          </t-tag>
        </div>
      </template>

      <!-- 操作列 -->
      <template #op="{ row }">
        <t-space>
          <t-link theme="primary" @click="handleClickDetail(row.menuId)">修改</t-link>
          <t-link theme="primary" @click="handleClickAdd(row.menuId)">新增</t-link>
          <t-link theme="danger" @click="handleClickDelete(row)">删除</t-link>
        </t-space>
      </template>
    </t-enhanced-table>

    <Dialog ref="dialogRef" :title="title" :menuOptions="data" @submit="getMenuData"></Dialog>

    <t-dialog v-model:visible="confirmVisible" header="确认删除当前所选项目？" body="删除后，数据将被清空，且无法恢复"
      @confirm="onConfirmDelete" />
  </view>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import Dialog from './dialog.vue';
import { ChevronDownIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
import { handleTree } from '@/utils/tool';
import { getMenuList, Delete } from '@/api/system/permission';
import { MessagePlugin } from 'tdesign-vue-next';
import { getPermissionStore } from '@/store/modules/permission';
const permissionStore = getPermissionStore();

const data = ref([]);

const treeConfig = {
  childrenKey: 'children',
};

const columns = [
  {
    width: '280',
    title: '菜单名称',
    colKey: 'menuName',
    treeNode: true, // 启用树形节点
  },
  {
    width: '100',
    title: '图标',
    colKey: 'icon',
  },
  {
    width: '100',
    title: '排序',
    colKey: 'orderNum',
  },
  {
    width: '200',
    title: '权限标识',
    colKey: 'perms',
  },
  {
    width: '280',
    title: '组件路径',
    colKey: 'component',
  },
  {
    width: '120',
    title: '状态',
    colKey: 'status',
  },
  {
    width: '200',
    title: '创建时间',
    colKey: 'createTime',
  },
  {
    width: '200',
    title: '操作',
    colKey: 'op',
  },
];

// 获取数据
const getMenuData = async () => {
  try {
    const res = await getMenuList();
    data.value = handleTree(res.data, 'menuId');
  } catch (e) {
    console.error('获取菜单失败:', e);
  }
};

// 操作方法
const handleClickDetail = (menuId: any) => {
  openValue('修改菜单', menuId);
};

const handleClickAdd = (menuId: any) => {
  openValue('添加菜单', menuId);
};

// 删除
const confirmVisible = ref(false);
const deleteId = ref('');
const handleClickDelete = (row: any) => {
  confirmVisible.value = true;
  deleteId.value = row.menuId;
};

const onConfirmDelete = () => {
  Delete(deleteId.value).then(() => {
    confirmVisible.value = false;
    MessagePlugin.success('删除成功');
    getMenuData();
    permissionStore.buildAsyncRoutes();
  });
};

// 初始化加载数据
getMenuData();

const treeExpandIcon = (h: any, { type, row }) => {
  return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
};

const expandAll = ref(false);
const tableRef = ref(null);
// 全部展开收起
const onExpandAllToggle = () => {
  expandAll.value = !expandAll.value;
  expandAll.value ? tableRef.value.expandAll() : tableRef.value.foldAll();
};

// 对话框
const title = ref('');
const dialogRef = ref(null);
const openValue = (text: string, menuId: any) => {
  title.value = text;
  dialogRef.value.changeOpen(true, menuId, text);
};

defineExpose({
  onExpandAllToggle,
  openValue,
});
</script>
